<script setup lang="ts">
  import Cabinet from '@/components/cabinet-view/index.vue';

  const data: any[] = [
    {
      label: '设备名称',
      value: '药管家智能药柜',
    },
    {
      label: '设备编号',
      value: 'ZRDM0123',
    },
    {
      label: '院内设备编号',
      value: '6-1-1',
    },
    {
      label: '所在院区',
      value: '工业南路店',
    },
    {
      label: '所在建筑',
      value: '1234567890',
    },
    {
      label: '所在楼层',
      value: '1',
    },
    {
      label: '详细位置',
      value: '1层东侧护士站',
    },
  ];

  const lightSystemData = [
    {
      label: '系统状态',
      value: '开启中',
    },
    {
      label: '照明模式',
      value: '智能模式',
    },
  ];

  const temperatureSystemData = [
    {
      label: '系统状态',
      value: '开启中',
    },
    {
      label: '目标温度',
      value: '8℃',
    },
    {
      label: '当前柜内温度',
      value: '16℃',
    },
  ];

  const monitorSystemData = [
    {
      label: '监控1',
      value: '查看',
    },
    {
      label: '监控2',
      value: '查看',
    },
  ];

  const disinfectSystemData = [
    {
      label: '系统状态',
      value: '开启中',
    },
    {
      label: '照明模式',
      value: '智能模式',
    },
    {
      label: '最近一次消毒时间',
      value: '2024-08-19',
    },
  ];
</script>

<template>
  <div>
    <a-descriptions :data="data" :column="{ xs: 1, md: 2, lg: 3 }" />
    <a-tabs class="mt-5" default-active-key="1">
      <a-tab-pane key="1" title="锁控系统">
        <Cabinet
          name="智能柜1"
          :count="24"
          :col-number="3"
          style="width: 500px"
        />
      </a-tab-pane>
      <a-tab-pane key="2" title="照明系统">
        <!-- <Tab2 /> -->
        <a-descriptions :data="lightSystemData" :column="1" />
      </a-tab-pane>
      <a-tab-pane key="3" title="消毒系统">
        <a-descriptions :data="disinfectSystemData" :column="1" />
      </a-tab-pane>
      <a-tab-pane key="4" title="温控系统">
        <a-descriptions :data="temperatureSystemData" :column="1" />
      </a-tab-pane>
      <a-tab-pane key="5" title="监控系统">
        <a-descriptions :data="monitorSystemData" :column="1" />
      </a-tab-pane>
    </a-tabs>
  </div>
</template>

<style lang="less" scoped>
  .device-img {
    width: 200px;
    height: 120px;
    background-color: #f5f5f5;
  }
</style>
